<template>
  <div class="container-content">
    <el-form
      ref="formRef"
      :model="kingAssembleEntity"
      label-width="90px"
      label-position="left"
    >
      <el-card shadow="never" class="mt20">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单据编号">
              <el-input
                v-model="kingAssembleEntity.kingAssembleEntity.docNo"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单据类型">
              <el-select
                v-model="kingAssembleEntity.kingAssembleEntity.docTypeCode"
                placeholder=""
                style="width: 100%"
                disabled
              >
                <el-option label="标准组装拆卸" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="事务类型">
              <el-select
                v-model="kingAssembleEntity.kingAssembleEntity.transactionType"
                placeholder=""
                style="width: 100%"
                disabled
              >
                <el-option label="组装" value="Assembly"></el-option>
                <el-option label="拆卸" value="Dassembly"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期">
              <el-date-picker
                v-model="kingAssembleEntity.kingAssembleEntity.bizTime"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                disabled
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="部门">
              <el-input
                v-model="kingAssembleEntity.kingAssembleEntity.bizDeptName"
                suffix-icon="el-icon-search"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓管员">
              <el-input
                v-model="kingAssembleEntity.kingAssembleEntity.keeperUserName"
                suffix-icon="el-icon-search"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="成品货主类型">
              <el-select
                v-model="
                  kingAssembleEntity.kingAssembleEntity.productShipperType
                "
                placeholder=""
                style="width: 100%"
                disabled
              >
                <el-option label="业务组织" value="BD_OwnerOrg"></el-option>
                <el-option label="供应商" value="BD_Supplier"></el-option>
                <el-option label="客户" value="BD_Customer"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成品货主">
              <el-input
                v-model="
                  kingAssembleEntity.kingAssembleEntity.productShipperName
                "
                suffix-icon="el-icon-search"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="库存组">
              <el-input
                v-model="
                  kingAssembleEntity.kingAssembleEntity.inventoryDeptCode
                "
                suffix-icon="el-icon-search"
                @focus="openList('库存组')"
              >
              </el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <!-- <el-col :span="12">
            <el-form-item label="成品货主类型">
              <el-select
                v-model="
                  kingAssembleEntity.kingAssembleEntity.productShipperType
                "
                placeholder=""
                style="width: 100%"
                @change="selectshipper"
              >
                <el-option label="业务组织" value="BD_OwnerOrg"></el-option>
                <el-option label="供应商" value="BD_Supplier"></el-option>
                <el-option label="客户" value="BD_Customer"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="描述">
              <el-input
                v-model="kingAssembleEntity.kingAssembleEntity.remarks"
                type="textarea"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <div class="desc-title">
        成品列表
        <el-button type="text" class="openBOM" @click="openBOM"
          >展开BOM</el-button
        >
      </div>

      <el-table
        :data="kingAssembleEntity.kingAssembleDetailEntities"
        style="width: 100%"
        highlight-current-row
        border
      >
        <template #empty
          ><el-button plain type="primary" round @click="addNewRow" disabled
            >添加新行</el-button
          ></template
        >
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              plain
              icon="el-icon-plus"
              size="small"
              @click="handleDataAdd(scope.$index, scope.row)"
              disabled
            ></el-button>
            <el-button
              plain
              icon="el-icon-minus"
              size="small"
              @click="handleDataDelete(scope.$index, scope.row)"
              disabled
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="序号">
          <template slot-scope="scope">
            <el-input v-model="scope.$index" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="物料编码">
          <template slot-scope="scope">
            <el-form-item label-width="0px" style="margin: 0">
              <el-input v-model="scope.row.materialCode" disabled> </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="物料名称">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.materialName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.model"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位">
          <template slot-scope="scope">
            <el-input clearable v-model="scope.row.unit" disabled> </el-input>
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <el-input v-model="scope.row.num" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="仓库">
          <template slot-scope="scope">
            <el-input v-model="scope.row.warehouseCode" disabled> </el-input>
          </template>
        </el-table-column>
        <el-table-column label="仓位">
          <template slot-scope="scope">
            <el-input v-model="scope.row.warehousePosition" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="库存状态">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.inventoryStateCode"
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="批号">
          <template slot-scope="scope">
            <el-input v-model="scope.row.batchNo" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="费用">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fee" disabled></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column label="参照BOM版本">
          <template slot-scope="scope">
            <el-input v-model="scope.row.bomVersion">
              <i
                slot="suffix"
                class="el-icon-search"
                @click="openList('参照bom版本', scope.$index)"
              ></i>
            </el-input>
          </template>
        </el-table-column> -->
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks" disabled></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="desc-title">子项列表</div>
      <el-table
        :data="kingAssembleDetailEntitiesChid"
        style="width: 100%"
        highlight-current-row
        border
      >
        <template #empty
          ><el-button plain type="primary" round @click="addNewRowChid"
            >添加新行</el-button
          ></template
        >
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              plain
              icon="el-icon-plus"
              size="small"
              @click="handleDataAddChid(scope.$index, scope.row)"
              disabled
            ></el-button>
            <el-button
              plain
              icon="el-icon-minus"
              size="small"
              @click="handleDataDeleteChid(scope.$index, scope.row)"
              disabled
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="序号">
          <template slot-scope="scope">
            <el-input v-model="scope.row.warehouseId" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="物料编码">
          <template slot-scope="scope">
            <el-form-item label-width="0px" style="margin: 0">
              <el-input v-model="scope.row.materialCode" disabled> </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="物料名称">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.materialName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.model"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位">
          <template slot-scope="scope">
            <el-input clearable v-model="scope.row.unit" disabled> </el-input>
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <el-input v-model="scope.row.num" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="仓库">
          <template slot-scope="scope">
            <el-input v-model="scope.row.warehouseCode" disabled> </el-input>
          </template>
        </el-table-column>
        <el-table-column label="仓位">
          <template slot-scope="scope">
            <el-input v-model="scope.row.warehousePosition" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="库存状态">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.inventoryStateCode"
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="批号">
          <template slot-scope="scope">
            <el-input v-model="scope.row.batchNo" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks" disabled></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
import { updataKingAssembleList } from "@/api/bim/bim";
export default {
  props: ["listid"],
  data() {
    return {
      shipper: "",
      flag: true,
      dialogTableVisible: false,
      title: "",
      kingAssembleEntity: {
        kingAssembleDetailEntities: [],
        kingAssembleEntity: {},
      },
      kingAssembleDetailEntitiesChid: [],
      dataList: [],
      gridData: [],
      count: 0,
      ids: [],
    };
  },
  methods: {
    handleDataAdd() {
      if (this.kingAssembleEntity.kingAssembleDetailEntities == undefined) {
        this.kingAssembleEntity.kingAssembleDetailEntities = [];
      }
      let outher = {
        assembleId: "",
        batchNo: "",
        bomVersion: "",
        createBy: "",
        createDate: "",
        createTime: "",
        createUser: "",
        fee: "",
        id: "",
        inventoryStateCode: "",

        materialCode: "",
        materialUnit: "",
        num: "",
        pageNo: 0,
        pageSize: 0,
        params: {},
        remark: "",
        remarks: "",
        searchValue: "",
        type: 0,
        updateBy: "",
        updateDate: "",
        updateTime: "",
        updateUser: "",
        warehouseCode: "",
        warehousePosition: "",
      };
      this.kingAssembleEntity.kingAssembleDetailEntities.push(outher);
      // console.log(this.kingAssembleEntity.kingAssembleDetailEntities);
    },
    handleDataAddChid() {
      if (this.kingAssembleDetailEntitiesChid == undefined) {
        this.kingAssembleDetailEntitiesChid = [];
      }
      let outher = {
        assembleId: "",
        batchNo: "",
        bomVersion: "",
        createBy: "",
        createDate: "",
        createTime: "",
        createUser: "",
        fee: "",
        id: "",
        inventoryStateCode: "",

        materialCode: "",
        materialUnit: "",
        num: "",
        pageNo: 0,
        pageSize: 0,
        params: {},
        remark: "",
        remarks: "",
        searchValue: "",
        type: 0,
        updateBy: "",
        updateDate: "",
        updateTime: "",
        updateUser: "",
        warehouseCode: "",
        warehousePosition: "",
      };
      this.kingAssembleDetailEntitiesChid.push(outher);
    },

    addNewRow() {
      this.handleDataAdd();
    },
    addNewRowChid() {
      this.handleDataAddChid();
    },
  },
  created() {
    this.selectProject();
    // console.log(this.listid);
    updataKingAssembleList(this.listid).then((res) => {
      if (res.code == 200) {
        this.kingAssembleEntity.kingAssembleEntity =
          res.data.kingAssembleEntity;
        for (let i = 0; i < res.data.kingAssembleDetailEntities.length; i++) {
          if (res.data.kingAssembleDetailEntities[i].type == 1) {
            this.kingAssembleEntity.kingAssembleDetailEntities.push(
              res.data.kingAssembleDetailEntities[i]
            );
          } else if (res.data.kingAssembleDetailEntities[i].type == 2) {
            this.kingAssembleDetailEntitiesChid.push(
              res.data.kingAssembleDetailEntities[i]
            );
          }
        }
      }
    });
  },
};
</script>
<style lang="scss" scoped>
.divider {
  margin: 0;
}
.el-icon-search {
  margin-top: 70% !important;
}
.openBOM {
  margin-left: 30px;
}
</style>
